<template>
  <div v-loading="loading" class="common-chart">
    <span>热门专业</span>
    <CommonChart :options="chartOptions" height="calc(100% - 40px)" @my-click="handleClick" />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue"
import type { EChartsOption } from "echarts"
import { CommonChart } from "@/components"
import { getWordCloudDataApi } from "@/interface"
import "echarts-wordcloud"

const props = defineProps({
  currentMajor: { type: String, default: "" }
})
const emits = defineEmits(["update:currentMajor"])

const currentMajor = computed({
  get: () => props.currentMajor,
  set: val => {
    emits("update:currentMajor", val)
  }
})

const loading = ref(false)
// 薪资水平对比图配置
const wordCloudData = ref<Record<string, any>[]>([])
const chartOptions = computed<EChartsOption>(() => {
  if (!wordCloudData.value || wordCloudData.value.length === 0) return {}
  return {
    tooltip: {
      show: true
    },
    series: [
      {
        type: "wordCloud",
        width: "90%",
        height: "90%",
        sizeRange: [14, 50],
        rotationRange: [-45, 45],
        gridSize: 20,
        data: wordCloudData.value.map((item: any) => ({
          name: item.name,
          value: item.value,
          textStyle: {
            color: `rgb(${Math.round(Math.random() * 160)},${Math.round(Math.random() * 160)},${Math.round(Math.random() * 160)})`
          }
        }))
      }
    ]
  }
})

// 可以根据需要自定义要显示的省份
const DEFAULT_PROVINCES = ["北京市", "上海市", "广东省", "浙江省", "江苏省", "天津市", "重庆市", "四川省"]

const getWordCloudData = () => {
  loading.value = true
  getWordCloudDataApi()
    .then((res: any) => {
      wordCloudData.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}

const handleClick = (params: any) => {
  console.log(params.data.name)
  currentMajor.value = params.data.name
}

onMounted(() => {
  getWordCloudData()
})
</script>

<style scoped>
.common-chart {
  width: 100%;
  height: 100%;
}
</style>
